import path from 'path'
import webpack, { Configuration as WebpackConfiguration } from 'webpack'
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'
import WebpackDevServer from 'webpack-dev-server'
import { merge } from 'webpack-merge'
import baseConfig from './webpack.base'
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration
}
const host = '127.0.0.1'
const port = '8082'


// 合并公共配置,并添加开发环境配置
const devConfig: Configuration = merge(baseConfig, {
  mode: 'development', // 开发模式,打包更加快速,省了代码优化步骤
  /**
    开发环境推荐：eval-cheap-module-source-map
    ● 本地开发首次打包慢点没关系,因为 eval 缓存的原因, 热更新会很快
    ● 开发中,我们每行代码不会写的太长,只需要定位到行就行,所以加上 cheap
    ● 我们希望能够找到源代码的错误,而不是打包后的,所以需要加上 module
   */
  devtool: 'eval-cheap-module-source-map',
  plugins:[
    new ReactRefreshWebpackPlugin(),// 添加热更新插件

  ]
})

const devServer = new WebpackDevServer(
  {
    host, // 地址
    port, // 端口
    open: false, // 是否自动打开，关闭
    setupExitSignals: true, // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出进程。
    compress: false, // gzip压缩,开发环境不开启,提升热更新速度
    hot: true, // 开启热更新
    historyApiFallback: true, // 解决history路由404问题
    allowedHosts: "all", // 允许所有 Host（不推荐生产环境）
    static: {
      directory: path.join(__dirname, '../public') // 托管静态资源public文件夹
    },

  },
  webpack(devConfig)
)

devServer.start().then(() => {
  console.log(`http://${host}:${port}`)
})
export default devConfig
